<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="龙庭社圈" autoBack>
			</u-navbar>
		</view>

		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		<view class="con-body">


			<view class="u-demo-block__content" style="background-color: #f8f8f8;">
				<view style="width: 100%;margin-bottom:20rpx;background-color: #fff;">
					<u-tabs :list="tabList"
							lineColor="#008987"
							:activeStyle="{
								color: '#303133',
								fontWeight: 'bold',
								transform: 'scale(1.05)'
							}"
							:inactiveStyle="{
								color: '#606266',
								transform: 'scale(1)'
							}"
							itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="tabChange"></u-tabs>
				</view>

				<!-- <view>
					<u-line></u-line>
				</view> -->
				<view v-for="(item, index) in releases" :key="index">
					<view v-if="item.type == 1" style="padding-left: 20rpx;margin-bottom:20rpx;background-color: #fff;">
						<u-cell @click="activeDetail(item.id, item.status)">
							<view slot="icon" style="margin-left: -30rpx;">
								<u-icon :name="item.image" width="150" height="120"></u-icon>
							</view>
							<view slot="label" style="margin-left: 15rpx;">
								<view v-if="item.status == -1" style="float: right; height: 0rpx; position:relative;top: 0rpx;right: 20rpx;">
									<u-image width="120rpx" height="120rpx"
										src="https://resourse.cnlhjt.com/upload/20220825/23a08670c569a7ed00a0f6cc135c250b.png">
									</u-image>
								</view>
								<view>
									<text
										style="font-size: 32rpx; font-weight: 600; color: #636363; font-family: Arial, Helvetica, sans-serif;">{{item.title}}</text>
								</view>
								<view style="margin-top: 5rpx;">

									<text style="font-size: 24rpx; color: #666666;"><text
											style="color: #DC143C; font-size: 22rpx;">主办方：</text>{{item.sponsor}}</text>
								</view>
								<view style="margin-top: 5rpx;">

									<text style="font-size: 24rpx; color: #666666;"><text
											style="color: #DC143C; font-size: 22rpx;">活动地址：</text>{{item.address}}</text>
								</view>
								<view v-if="item.limit == 0" style="margin-top: 10rpx; color: #696969;">

									<text style="font-size: 22rpx; color: #82848A;">限制人数：不限</text>
									<text
										style="font-size: 22rpx;margin-left: 40rpx; color: #DD6161;">已参与人数:{{item.join}}人</text>
								</view>
								<view v-else style="margin-top: 10rpx; color: #696969;">
									<text style="font-size: 22rpx; color: #82848A;">限制人数：{{item.limit}}人</text>
									<text
										style="font-size: 22rpx;margin-left: 40rpx; color: #DD6161;">已参与人数：{{item.join}}人</text>
								</view>
								<view v-if="item.free == 0" style="margin-top: 15rpx; color: #696969;">

									<text style="font-size: 26rpx;">{{item.time}}</text>
									<text style="font-size: 26rpx;margin-left: 40rpx; color: red;">免费</text>
								</view>
								<view v-else style="font-size: 26rpx;margin-top: 15rpx; color: #696969;">

									<text style="font-size: 26rpx;">{{item.time}}</text>
									<text
										style="font-size: 26rpx;margin-left: 40rpx; color: red;">￥{{item.price}}/人</text>
								</view>
							</view>
						</u-cell>
					</view>
					<view class="album" v-else>
						<!-- <view class="album__avatar">
							<u-avatar :src="item.avatar" mode="circle">
							</u-avatar>
						</view> -->
						<view v-if="ismsg && index==1" class="msgnum" @click="tomsgList">{{msgNum}}</view>
						<view class="u-flex u-row-between">
							<view class="album__avatar">
								<u-avatar :src="item.avatar" mode="circle">
								</u-avatar>
							</view>
							<view style="width:75%;">
								<u-text :text="item.username" color="#3e3e3e" bold size="17"></u-text>
								<u-text margin="0 0 8rpx 0" color="#999999" size="13" :text="'来自 ' + item.from"></u-text>
							</view>
							<view class="u-m-l-10 u-p-10" @click="toshowsheet(item.id,index)">
								<u-icon name="more-dot-fill" color="#969799" size="20"></u-icon>
							</view>
						</view>

						<view class="album__content" style="display: block;width: 100%;">
							<view style="margin-top: 20rpx; margin-bottom: 10rpx;">
								<view style="margin-bottom: 20rpx;">
									<text style="color: #008987; font-size: 28rpx;">{{item.theme}}</text>
									<text style="color: #333333;font-size: 30rpx;margin-left: 10rpx;"> {{item.content}}</text>
								</view>
								
								<u-album :urls="item.images" multipleSize="100" space="3"></u-album>
							</view>
											
							<view style="height:50rpx;margin-top:20rpx;">
								<text style="color: #666666; font-size: 26rpx; float: left;">{{item.time}}</text>
											
								<view style="margin-right: 10rpx; float: right; display: inline;">
									<u-icon @click="intoComment(item.id)" name="chat" size="18" label-size="26rpx"
										color="#999" :label="item.comment + '评论'"></u-icon>
								</view>
								<view style="margin-right: 10rpx; float: right; display: inline;">
									<u-icon name="heart" size="18" color="#999" label-size="26rpx"
										:label="item.like + '赞'" @click="like(item.id, index)"></u-icon>
								</view>
								<view style="margin-right: 10rpx; float: right; display: inline;">
									<u-icon name="eye" size="18" color="#999" label-size="26rpx"
										:label="item.see + '浏览'"></u-icon>
								</view>
											
							</view>
						</view>
						<!-- <view class="u-m-l-10 u-p-10" @click="toshowsheet(item.id,index)">
							<u-icon name="more-dot-fill" color="#969799" size="20"></u-icon>
						</view> -->
					</view>


					<!-- <view>
						<u-line></u-line>
					</view> -->
				</view>
				
				<u-action-sheet :actions="list" round="10" :closeOnClickOverlay="true" :closeOnClickAction="true" cancelText="取消" :show="show" @close="show = false" @select="selectClick"></u-action-sheet>
				<u-toast ref="uToast"></u-toast>
				<u-loadmore :status="status" />
				<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCommunity,
		likeDynamic,
		forwardDynamic,
		getUnRead
	} from "@/service/communitService.js";
	export default {
		data() {
			return {
				status: 'loadmore',
				showEmpty: false,
				releases: [],
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#0B868E',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [{
						iconPath: 'https://resourse.cnlhjt.com/upload/20220825/297a6c922f01bffbf8003dcd71876a3e.png',
						selectedIconPath: 'https://resourse.cnlhjt.com/upload/20220825/297a6c922f01bffbf8003dcd71876a3e.png',
						text: '发布',
						active: false
					},
					{
						iconPath: 'https://resourse.cnlhjt.com/upload/20220826/fe1324e9f480c358b1201642eed20eff.png',
						selectedIconPath: 'https://resourse.cnlhjt.com/upload/20220826/fe1324e9f480c358b1201642eed20eff.png',
						text: '首页',
						active: false
					},
					{
						iconPath: 'https://resourse.cnlhjt.com/upload/20220825/9745420910da6baf1946a0e7c3c069b1.png',
						selectedIconPath: 'https://resourse.cnlhjt.com/upload/20220825/9745420910da6baf1946a0e7c3c069b1.png',
						text: '我的发布',
						active: false
					}
				],
				current: 1,
				tabList: [{
					name: '推荐',
					value: 1
				}, {
					name: '热门',
					value: 0
				}],
				page: 1,
				limit: 10,
				id:0,
				index:0,
				show:false,
				list:[{
					name:'转发',
					color:'#333',
					fontSize:'15'
				},{
					name:'点赞',
					color:'#555',
					fontSize:'15'
				},{
					name:'评论',
					color:'#333',
					fontSize:'15'
				}],
				reFresh: "",
				
				ismsg:false,
				msgNum:'未读消息'
			}
		},
		watch:{
			//监听reFresh,如果有修改就执行监听器
				reFresh: function() {
					this.releases=[];
			        //调接口刷新数据
					getCommunity({
						sort: this.current,
						page: this.page,
						limit: this.limit
					}).then(this.getCommunity);
				}
		},
		onReachBottom() {
			if (this.status == 'nomore') return;
			this.status = 'loading';
			this.page = ++this.page;
			getCommunity({
				sort: this.current,
				page: this.page,
				limit: this.limit
			}).then(this.getCommunity);
		},
		onLoad() {
			getCommunity({
				sort: this.current,
				page: this.page,
				limit: this.limit
			}).then(this.getCommunity);
			getUnRead().then(this.getUnRead);
		},
		methods: {
			getCommunity(e) {
				if (e.code == 200) {
					this.showEmpty = false;
					let list = e.result;
					list.forEach(item => {
						this.releases.push(item);
					})
				} else {
					this.status = 'nomore';
					if (this.releases.length == 0) {
						this.showEmpty = true;
					}
				}
			},
			getUnRead(e){
				if(e.code==200){
					this.ismsg=true;
					this.msgNum=e.msg;
				}else{
					this.ismsg=false
				}
			},
			tomsgList(){
				this.$u.route({
					url: "/pagesCommunity/index/unReadDetail",
					params: {}
				})
				this.ismsg=false;
			},
			trigger(e) {
				if (e.index == 0) {
					this.$u.route({
						url: "/pagesCommunity/index/release",
						params: {}
					})
				} else if (e.index == 1) {
					this.$u.route({
						url: "/pages/index/index",
						params: {}
					})
				} else if (e.index == 2) {
					this.$u.route({
						url: "/pagesCommunity/mine/release",
						params: {}
					})
				}
			},
			fabClick() {
			},
			tabChange(e) {
				// console.log(e.name);
				this.current = e.value;
				this.releases = [];
				this.page = 1;
				this.status = 'loadmore';
				getCommunity({
					sort: this.current,
					page: this.page,
					limit: this.limit
				}).then(this.getCommunity);
			},
			activeDetail(id, status) {
				if(status == -1){
					uni.showToast({
						title: '活动已结束',
						icon: "error"
					});
					return;
				}
				this.$u.route({
					url: "/pagesCommunity/index/active-detail",
					params: {
						gid: id
					}
				})
			},
			like(id, index) {
				likeDynamic({
					gid: id
				}).then(res => {
					if (res.code == 200) {
						this.releases[index].like += 1;
						this.$refs.uToast.show({

							type: 'success',
							title: '成功',
							message: res.msg
						})
					} else {
						this.$refs.uToast.show({

							type: 'error',
							title: '失败',
							message: res.msg
						})
					}
				});
			},
			intoComment(id) {
				this.$u.route({
					url: '/pagesCommunity/index/comment',
					params: {
						id: id
					}
				});
			},
			toshowsheet(id,index){
				this.id=id;
				this.show=true;
				this.index=index;
			},
			selectClick(i){
				if(i.name=='点赞'){
					this.like(this.id,this.index);
				}else if(i.name=='评论'){
					this.intoComment(this.id)
				}else if(i.name=='转发'){
					forwardDynamic({
						id: this.id
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								title: '成功',
								message: res.msg
							})
							this.current=1;
							getCommunity({
								sort: this.current,
								page: 10,
								limit: 1
							}).then(this.getCommunity);
						} else {
							this.$refs.uToast.show({
								type: 'error',
								title: '失败',
								message: res.msg
							})
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.album {
		width:92%;
		margin-left:2%;
		padding: 20rpx 2%;
		background-color: #FFFFFF;
		border-bottom:1rpx solid #f8f8f8;


		&__avatar {
			padding: 5rpx;
			border-radius: 3rpx;
		}

		&__content {
			// margin-left: 20rpx;
			flex: 1;
		}
	}

	.scroll-list {
		margin-left: 20rpx;
		@include flex(column);

		&__goods-item {
			margin-right: 20rpx;

			&__image {
				width: 86px;
				height: 65px;
				border-radius: 4px;
			}

			&__text {
				color: #126970;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}
	.msgnum{
		position: relative;
		top:0rpx;
		left:30%;
		width:40%;
		height:60rpx;
		line-height: 60rpx;
		text-align: center;
		margin-bottom:20rpx;
		z-index: 999;
		color: #fff;
		font-size: 28rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 30rpx;
	}
</style>
